<template>
	<div class="flex items-start px-[35px]">
		<account-avatar class="relative -top-1" :data="userInfo?.avatar" :width="36" />
		<div class="flex-1 p-1">
			<n-input
				placeholder=""
				v-model:value="sendStr"
				:on-update:value="changeSendStr"
				type="textarea"
				:autosize="{
					minRows: 1,
					maxRows: 5
				}" />
		</div>
		<div
			@click="handSendMessage"
			class="w-[36px] h-[36px] flex items-center justify-center rounded-full bg-primary">
			<base-icon class="transform rotate-180" size="26" name="back2"></base-icon>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue'
import { AccountAvatar } from '@/components/account/'
import { NInput } from 'naive-ui'
import { BaseIcon } from '@/components/base'
import { addComment } from '@/api/feed'
import { useProfileStore } from '@/store'
import { UserInfo } from '@/types'

const profileStore = useProfileStore()
const sendStr = ref('')
const userInfo = computed<UserInfo | null>(() => profileStore.userInfo)
const props = defineProps({
	tweetId: {
		type: Number,
		default: 0
	}
})

const emit = defineEmits(['reload'])

const changeSendStr = (val: string) => {
	sendStr.value = val
}

const handSendMessage = async () => {
	console.log(sendStr.value)
	if (!sendStr.value) {
		return
	}
	try {
		console.log(sendStr.value)
		await addComment({
			tweetId: props.tweetId,
			content: sendStr.value
		})
		sendStr.value = ''
		emit('reload')
	} catch (error) {}
}
</script>
